<template>
	<el-dialog v-model="dialog" title="店铺审核" width="40%" :before-close="handleClose">
		<el-form ref="formRef" :model="state.subForm" :rules="state.rules">
			<el-card>
				<template #header>店铺信息</template>
				<el-form-item label="店铺名称" prop="name">
					{{ state.form.name }}
				</el-form-item>
				<el-form-item label="联系电话" prop="telephone">
					{{ state.form.telephone }}
				</el-form-item>
				<el-form-item label="店铺logo" prop="logoUrl" v-if="state.form.logoUrl">
					<el-image
						style="width: 60px; height: 60px"
						:src="state.form.logoUrl"
						:preview-src-list="[state.form.logoUrl]"
						fit="cover"
						:preview-teleported="true"
					></el-image
				></el-form-item>
				<el-form-item label="地址" prop="detailAddress">
					{{ state.form.detailAddress }}
				</el-form-item>
			</el-card>
			<el-card v-if="state.form.verifyStatus == '0'">
				<template #header>审核</template>
				<el-form-item label="审核状态" prop="verifyStatus">
					<el-radio-group v-model="state.subForm.verifyStatus">
						<el-radio label="1">审核驳回</el-radio>
						<el-radio label="2">审核通过</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="审核描述" prop="verifyDesc">
					<el-input v-model="state.subForm.verifyDesc" type="textarea" />
				</el-form-item>
			</el-card>
			<el-card v-else>
				<template #header>审核信息</template>
				<el-form-item label="审核状态">
					<dict-tag :options="shop_verify_status" :value="state.form.verifyStatus"></dict-tag>
				</el-form-item>
				<el-form-item label="审核描述">
					{{ state.form.verifyDesc }}
				</el-form-item>
			</el-card>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleClose">关 闭</el-button>
				<el-button type="primary" v-if="state.form.verifyStatus == '0'" :loading="loading" @click="submitForm(formRef)">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { getById, verifyObj } from '/@/api/shop/shopapply';
import { ElMessage, FormInstance } from 'element-plus';
const emit = defineEmits(['initPage']);
import { useDict } from '/@/utils/dict';

const { shop_verify_status } = useDict('shop_verify_status');
const state = reactive({
	form: {
		id: undefined,
		shopId: '',
		name: '',
		telephone: '',
		detailAddress: '',
		logoUrls: [],
		logoUrl: '',
		status: '',
		type: '',
		verifyStatus: '',
		verifyDesc: '',
	},
	subForm: {
		id: undefined,
		verifyDesc: '',
		verifyStatus: '',
	},
	rules: {
		verifyStatus: [
			{
				required: true,
				message: '请选择审核状态',
				trigger: 'change',
			},
		],
	},
});

const dialog = ref(false);
const loading = ref(false);
const formRef = ref();

const initForm = (row: any) => {
	dialog.value = true;
	if (row && row.id) {
		getDetail(row.id);
	}
};
const getDetail = (id: string) => {
	loading.value = true;
	getById(id)
		.then((response) => {
			loading.value = false;
			state.form = response.data.data;
		})
		.catch(() => {
			loading.value = false;
		});
};
/**
 * 关闭事件
 */
const handleClose = () => {
	resetForm(formRef.value);
};
/**
 * 重置表单
 */
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	state.form.id = undefined;
	loading.value = false;
	dialog.value = false;
	formEl.resetFields();
};
/**
 * 提交按钮
 */
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			loading.value = true;
			state.subForm.id = state.form.id;
			verifyObj(state.subForm)
				.then((response) => {
					resetForm(formRef.value);
					ElMessage.success('审核成功');
					emit('initPage');
				})
				.catch(() => {
					loading.value = false;
				});
		}
	});
};
defineExpose({
	initForm,
});
</script>
<style lang="scss"></style>
